<template>
  <custom-modal-page :visible.sync="visible">
    <div class="planoperate-container">
      <div class="common-page-header" :header="getTitle(type)">
        <a-button type="primary" ghost class="back-button" @click="goBack()">
          返回
        </a-button>
      </div>
      <div class="planoperate-body">
        <!-- 仅在审批状态下可见 -->
        <flowList
          v-if="type == 1 && flowListSource.length > 0"
          :source="flowListSource"
          replaceFields="approveUser"
        ></flowList>

        <a-form-model ref="ruleForm" :model="ruleForm" :rules="formRules">
          <custom-collapse :activeKey="activeKey" :panelList="panelList">
            <!-- 任务明细 -->
            <template slot="space_1">
              <div class="task-detail-container">
                <a-row>
                  <!-- 类别 -->
                  <a-col v-bind="span"
                    ><a-form-model-item label="类别" prop="category">
                      <a-input
                        :value="filterCategoryValue(category)"
                        allowClear
                        disabled
                      /> </a-form-model-item
                  ></a-col>
                  <!-- 计划时间 -->
                  <a-col v-bind="span">
                    <a-form-model-item label="计划时间" prop="planTime">
                      <!-- 年 -->
                      <a-date-picker
                        v-if="category == 1"
                        mode="year"
                        format="YYYY"
                        valueFormat="YYYY"
                        v-model="ruleForm.planTime"
                        @panelChange="yearPick"
                        @openChange="yearStatus"
                        :open="isopen"
                        :placeholder="formDisabled ? '' : '选择年份'"
                        :allowClear="false"
                        :disabled="formDisabled"
                        class="year-picker"
                        @change="planTimeChange($event, 1)"
                      />
                      <!-- 月 -->
                      <a-month-picker
                        v-if="category == 2"
                        class="month-picker"
                        format="YYYY-MM"
                        valueFormat="YYYY-MM"
                        :placeholder="formDisabled ? '' : '请选择月份'"
                        v-model="ruleForm.planTime"
                        :allowClear="false"
                        :disabled="formDisabled"
                        @change="planTimeChange($event, 2)"
                      />
                      <!-- 周 -->
                      <a-week-picker
                        v-if="category == 3"
                        class="week-picker"
                        valueFormat="YYYY-w"
                        format="YYYY-wo"
                        :placeholder="formDisabled ? '' : '请选择周'"
                        v-model="ruleForm.planTime"
                        :allowClear="false"
                        :disabled="formDisabled"
                        @change="planTimeChange($event, 3)"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 编制人 -->
                  <a-col v-bind="span"
                    ><a-form-model-item label="编制人" prop="modelInfo">
                      <a-input
                        v-model="ruleForm.fillUser"
                        allowClear
                        disabled /></a-form-model-item
                  ></a-col>
                  <!-- 编制时间 -->
                  <a-col v-bind="span"
                    ><a-form-model-item label="编制时间" prop="modelInfo">
                      <a-input
                        v-model="ruleForm.fillTime"
                        allowClear
                        disabled /></a-form-model-item
                  ></a-col>
                  <!-- 备注 -->
                  <a-col :span="24"
                    ><a-form-model-item label="备注" prop="modelInfo">
                      <a-input
                        type="textarea"
                        :placeholder="formDisabled ? '' : '请输入备注'"
                        :disabled="formDisabled"
                        v-model="ruleForm.remark"
                        allowClear /></a-form-model-item
                  ></a-col>
                </a-row>
              </div>
            </template>
            <!-- 任务清单 -->
            <template slot="space_2">
              <div
                class="task-list-container"
                :class="(type == 1 || type == 2) && 'no-export'"
              >
                <a-tabs v-model="tabIndex">
                  <a-tab-pane key="1" tab="按清单填写 ">
                    <!-- 选择梁号  -- 尽在查看模式下展示 -->
                    <div class="choose-beam-number" v-if="type == 2">
                      <a-select
                        placeholder="请选择梁号 "
                        show-search
                        allowClear
                        v-model="beamNumber"
                        v-loading="beamNumLoading"
                        :filter-option="filterOption"
                        @change="chooseBeamNumber()"
                      >
                        <a-select-option
                          :value="item.id"
                          v-for="item in beamNumberSource"
                          :key="item.id"
                        >
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                      <a-button type="primary" @click="chooseBeamNumber()">
                        查询
                      </a-button>
                    </div>
                    <treeTable
                      :category="category"
                      :type="type"
                      :id="id"
                      :beamNumber="beamNumber || ''"
                      ref="treeTable"
                    ></treeTable>
                  </a-tab-pane>
                  <a-tab-pane key="2" tab="按模板导入">
                    <div class="choose-template-container">
                      <a-form-model-item label="模板信息" prop="modelInfo">
                        <div class="download-model">
                          <span>1、下载导入模板，根据模板提示完善内容</span>
                          <a-button
                            class="solid-line"
                            :loading="downloadLoading"
                            @click="downloadTemplate()"
                            >下载模板</a-button
                          >
                        </div>
                        <div class="choose-file-warp">
                          <div class="tip">
                            2、上传完善好的内容，支持.xls、.xlsx文件
                          </div>
                          <div class="choose-file">
                            <a-upload-dragger
                              name="file"
                              accept=".xls,.xlsx"
                              :beforeUpload="beforeUpload"
                            >
                              <div class="icon"></div>
                              <div class="upload-tip">
                                单击或拖动文件到此区域进行上传
                              </div>
                            </a-upload-dragger>
                          </div>
                          <div class="choosed-file-warp">
                            <div
                              class="choosed-file flex"
                              v-for="(item, index) in fileList"
                              :key="index"
                            >
                              <div class="name">
                                {{ item.name }}
                              </div>
                              <div class="size">
                                {{ (item.size / 1024).toFixed(2) }} kb
                              </div>
                              <div
                                class="delete-button flex"
                                @click="delChoosedFile(index)"
                              >
                                <a-icon type="delete" />
                              </div>
                            </div>
                          </div>
                        </div>
                      </a-form-model-item>
                    </div>
                  </a-tab-pane>
                </a-tabs>
              </div>
            </template>
            <!-- 审批信息 -->
            <template slot="space_3" v-if="type == 1">
              <div class="task-detail-container">
                <a-row>
                  <!-- 审核结果 -->
                  <a-col v-bind="span"
                    ><a-form-model-item label="审核结果" prop="operate">
                      <a-radio-group v-model="ruleForm.operate">
                        <a-radio value="2">通过</a-radio>
                        <a-radio value="3">不通过</a-radio>
                      </a-radio-group>
                    </a-form-model-item></a-col
                  >
                  <!-- 审批人 -->
                  <a-col v-bind="span"
                    ><a-form-model-item label="审批人" prop="approvePeople">
                      <a-input
                        disabled
                        v-model="ruleForm.approvePeople"
                        allowClear /></a-form-model-item
                  ></a-col>
                  <!-- 审批意见 -->
                  <a-col :span="24"
                    ><a-form-model-item label="审批意见" prop="reason">
                      <a-input
                        type="textarea"
                        placeholder="请输入审批意见"
                        v-model="ruleForm.reason"
                        allowClear /></a-form-model-item
                  ></a-col>
                </a-row>
              </div>
            </template>
          </custom-collapse>
        </a-form-model>
      </div>
      <div class="planoperate-footer" v-if="type != 2">
        <a-button @click="goBack()">取消</a-button>
        <a-button
          :loading="saveLoading"
          @click="onSubmit(0)"
          v-if="type == 0 || type == 3"
          >暂存</a-button
        >
        <a-button type="primary" :loading="submitLoading" @click="onSubmit(1)">
          确定
        </a-button>
      </div>
    </div>
  </custom-modal-page>
</template>
<script>
import moment from "moment";
import { mapGetters } from "vuex";
import treeTable from "../components/treeTable";
import flowList from "@/components/flow-list";
import { getPathByKey } from "@/utils";
import {
  getDetail,
  dlImportPlanTemplate,
  saveOrUpdateData,
  getFlowNode,
  approveData,
  importPlanExcel,
  getComponentPartsSelect,
} from "@/api/wisdom-beam/planSchedule-app.js";
import {
  downLoadFileByArraybuffer,
  getNowDateStr,
  notificationTip,
} from "@/utils";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    //0新增 1审批  2查看  3编辑
    type: {
      type: [String, Number],
      default: "",
    },
    id: {
      type: String,
      default: "",
    },

    //计划类型 1年计划 2月计划 3周计划
    category: {
      type: [String, Number],
      default: "",
    },
  },
  components: {
    treeTable,
    flowList,
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          let { type } = this;
          this.initData();
          if (type != 0) {
            this.getDetail();
            if (type == 1) {
              this.panelList.push({
                key: "3",
                header: "审批信息",
              });
              this.getFlowNode();
            }
            if (type == 2) {
              this.getComponentPartsSelect();
            }
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      beamNumLoading: false,
      beamNumberSource: [],
      beamNumber: undefined,
      fileList: [],
      tabIndex: "1",
      flowListSource: [],
      isopen: false,
      formDisabled: false,
      ruleForm: {
        //计划时间
        planTime: undefined,
        //编制人
        fillUser: "",
        // 编制时间
        fillTime: "",
        // 备注
        remark: "",
        //审批结果
        operate: "2",
        //审批人
        approvePeople: "",
        //审批意见
        reason: "",
      },
      formRules: {
        planTime: [
          { required: true, message: "请选择计划时间", trigger: "change" },
        ],
        operate: [
          { required: true, message: "请选择审批结果", trigger: "change" },
        ],
      },
      downloadLoading: false,
      activeKey: ["1", "2", "3"],
      saveLoading: false,
      submitLoading: false,
      span: {
        xs: 24,
        sm: 24,
        md: 24,
        lg: 12,
        xl: 12,
        xxl: 6,
      },
      panelList: [
        {
          key: "1",
          header: "任务明细",
        },
        {
          key: "2",
          header: "任务清单",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    chooseBeamNumber() {
      this.$refs["treeTable"].getData(1);
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },

    //查询梁号列表
    getComponentPartsSelect() {
      this.beamNumLoading = true;
      return new Promise((resolve, reject) => {
        getComponentPartsSelect({ id: this.id })
          .then((res) => {
            let { data } = res;
            this.beamNumberSource = data?.result ?? [];
            resolve();
          })
          .catch((_) => {
            this.beamNumberSource = [];
            reject();
          })
          .finally((_) => {
            this.beamNumLoading = false;
          });
      });
    },

    //查询详情
    getDetail() {
      return new Promise((resolve, reject) => {
        getDetail({ id: this.id })
          .then((res) => {
            let { data } = res;
            let source = data?.result ?? {};
            this.ruleForm = {
              //计划时间
              planTime: source?.plannedTime ?? undefined,
              //编制人
              fillUser: source?.fillUser ?? "",
              //编制时间
              fillTime: source?.fillTime ?? "",
              //备注
              remark: source?.remark ?? "",
              //审批结果
              operate: "2",
              //审批人
              approvePeople: this.userInfo.nickName,
              //审批意见
              reason: "",
            };
            resolve();
          })
          .catch((_) => {
            this.restForm();
            reject();
          })
          .finally((_) => {});
      });
    },

    //查询流程数据
    getFlowNode() {
      return new Promise((resolve, reject) => {
        let { id } = this;
        getFlowNode({ id })
          .then((res) => {
            let { data } = res;
            (data?.result ?? []).forEach((v) => {
              v.subTitle = v.name;
              v.$$nodeStatus = "active";
            });
            this.flowListSource = data?.result ?? [];
            resolve();
          })
          .catch((_) => {
            this.flowListSource = [];
            reject();
          })
          .finally((_) => {});
      });
    },

    //提交
    onSubmit(type = 0) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.type == 1) {
            //审批数据
            this.approveData();
            return;
          }
          let tableData = this.$refs["treeTable"].tableData;
          let rawTreeData = this.$refs["treeTable"].rawTreeData;
          let checkedData = this.$refs["treeTable"].checkedData;
          let { category, tabIndex, fileList } = this;
          //0新增 1审批  2查看  3编辑
          let abnormalData = [];
          let hasFillData = [];
          let dataRows = [];
          Object.keys(tableData).forEach((key) => {
            let rows = tableData[key]
              .filter((v) => !v.children || v.children.length == 0)
              .filter((v) => {
                return (
                  v.planStartTime ||
                  v.planEndTime ||
                  v.planJqStartTime ||
                  v.planStartTime
                );
              });
            dataRows.push({ data: rows, page: key });
            abnormalData = abnormalData.concat(
              this.checkDataisIntegrity(rows, key)
            );
            //年计划
            if (category == 1) {
              let data = rows.filter((v) =>
                (checkedData[key] ?? []).includes(v.itemId)
              );
              hasFillData.push(...data);
            } else {
              hasFillData.push(...rows);
            }
          });
          if (abnormalData.length > 0 && type == 1) {
            //数据填写不完整
            this.$warning({
              title: "【提示】信息录入不完整",
              width: 440,
              content: (
                <div>
                  {abnormalData.map((v) => {
                    let { $$page, itemId } = v;
                    let linkData = getPathByKey(
                      itemId,
                      "itemId",
                      rawTreeData[$$page],
                      true,
                      "children"
                    );
                    let names = linkData
                      .map((v) => v.name)
                      .toString()
                      .replace(/,/g, " > ");
                    return (
                      <div style="margin-bottom:5px">
                        第{$$page}页【{names}】;
                      </div>
                    );
                  })}
                </div>
              ),
            });
          } else {
            let requestParams = {};
            if (tabIndex == "1") {
              //按清单填写
              requestParams = this.getParams(type, dataRows);
            } else {
              //按模板导入
              requestParams = {
                submitType: type,
              };
            }
            //数据完整-执行后续操作
            if (tabIndex == "1") {
              //按清单填写
              if (hasFillData.length == 0) {
                this.$warning({
                  title: "提示",
                  width: 440,
                  content: `${
                    type == 0 ? "暂无可暂存的数据！" : "暂无可提交的数据！"
                  }`,
                });
              } else {
                this.saveOrUpdateData(requestParams, type);
              }
            } else {
              //按模板导入
              if (fileList.length == 0) {
                this.$warning({
                  title: "提示",
                  width: 440,
                  content: `请先上传模板文件！`,
                });
              } else {
                //执行暂存操作
                this.importPlanExcel(type);
              }
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //【新增、编辑】状态下的模板的暂存和提交
    importPlanExcel(type = 0) {
      if (type == 0) {
        this.saveLoading = true;
      } else {
        this.submitLoading = true;
      }
      return new Promise((resolve, reject) => {
        let { category, fileList } = this;
        let { planTime, fillUser, fillTime } = this.ruleForm;
        let formdata = new FormData();
        formdata.append("uploadFile", fileList?.[0] ?? "");
        formdata.append("category", category ?? "");
        formdata.append("plannedTime", planTime ?? "");
        formdata.append("fillUser", fillUser ?? "");
        formdata.append("fillTime", fillTime ?? "");
        importPlanExcel(formdata, type)
          .then((res) => {
            let { data } = res;
            notificationTip("success", "操作成功");
            this.goBack();
            this.$parent.getData();
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {
            if (type == 0) {
              this.saveLoading = false;
            } else {
              this.submitLoading = false;
            }
          });
      });
    },

    //【新增、编辑】状态下的暂存和提交
    saveOrUpdateData(params = {}, type = 0) {
      if (type == 0) {
        this.saveLoading = true;
      } else {
        this.submitLoading = true;
      }
      return new Promise((resolve, reject) => {
        saveOrUpdateData(params)
          .then((res) => {
            notificationTip("success", "操作成功");
            this.goBack();
            this.$parent.getData();
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {
            if (type == 0) {
              this.saveLoading = false;
            } else {
              this.submitLoading = false;
            }
          });
      });
    },

    //审批
    approveData() {
      this.submitLoading = true;
      return new Promise((resolve, reject) => {
        let { operate, reason } = this.ruleForm;
        let { id } = this;
        approveData({ operate, reason, id })
          .then((res) => {
            notificationTip("success", "审批成功");
            this.$parent.getData();
            this.goBack();
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {
            this.submitLoading = false;
          });
      });
    },

    getParams(type = 0, targetData = []) {
      let { planTime, fillUser, fillTime, remark } = this.ruleForm;
      let checkedData = this.$refs["treeTable"].checkedData;
      let { category } = this;

      let fillKeys = [
        "planStartTime",
        "planEndTime",
        "planJqStartTime",
        "planJqEndTime",
      ];
      let params = {
        submitType: type,
        category: category ?? "",
        plannedTime: planTime ?? "",
        fillUser: fillUser ?? "",
        fillTime: fillTime ?? "",
        remark: remark ?? "",
        id: this.id ?? "",
        scheduleChildParamsList: [],
      };
      targetData.forEach((v) => {
        let { data, page } = v;
        if (type == 0) {
          //暂存
          data.forEach((item) => {
            if (fillKeys.some((key) => item[key])) {
              if (category == 1) {
                (checkedData[page] ?? []).includes(item.itemId) &&
                  params.scheduleChildParamsList.push(item);
              } else {
                params.scheduleChildParamsList.push(item);
              }
            }
          });
        } else {
          //提交
          data.forEach((item) => {
            if (fillKeys.every((key) => item[key])) {
              if (category == 1) {
                (checkedData[page] ?? []).includes(item.itemId) &&
                  params.scheduleChildParamsList.push(item);
              } else {
                params.scheduleChildParamsList.push(item);
              }
            }
          });
        }
      });
      params.scheduleChildParamsList = params.scheduleChildParamsList.map(
        (v) => {
          let {
            itemId,
            planStartTime,
            planEndTime,
            planJqStartTime,
            planJqEndTime,
          } = v;
          return {
            itemId,
            planStartTime: planStartTime ?? "",
            planEndTime: planEndTime ?? "",
            planJqStartTime: planJqStartTime ?? "",
            planJqEndTime: planJqEndTime ?? "",
          };
        }
      );
      return params;
    },

    //校验数据填写是否完整
    checkDataisIntegrity(targetData = [], page = 1) {
      let { category } = this;
      let fillKeys = [
        "planStartTime",
        "planEndTime",
        "planJqStartTime",
        "planJqEndTime",
      ];
      let abnormalData = [];
      targetData.forEach((v) => {
        if (!fillKeys.every((key) => v[key])) {
          abnormalData.push({ ...v, $$page: page });
        }
      });

      //年计划
      if (category == 1) {
        let checkedData = this.$refs["treeTable"].checkedData;
        abnormalData = abnormalData.filter((v) =>
          (checkedData[page] ?? []).includes(v.itemId)
        );
      }
      return abnormalData;
    },

    //初始化数据
    initData() {
      //0新增 1审批  2查看  3编辑
      let { type } = this;
      switch (Number(type)) {
        //新增
        case 0:
          this.formDisabled = false;
          //计划时间
          this.initPlanTime();
          break;

        //审批
        case 1:
          this.formDisabled = true;
          break;

        //查看
        case 2:
          this.formDisabled = true;
          break;

        //编辑
        case 3:
          this.formDisabled = false;
          break;

        default:
          break;
      }
      //编制人
      this.ruleForm.fillUser = this.userInfo?.nickName;
      //编制时间
      this.ruleForm.fillTime = moment().format("YYYY-MM-DD hh:mm:ss");
    },

    //初始化计划时间
    initPlanTime() {
      let { type, category } = this;
      if (type == 0) {
        //新增
        let time = "";
        switch (Number(category)) {
          //年计划
          case 1:
            time = moment().format("YYYY");
            break;

          //月计划
          case 2:
            time = moment().format("YYYY-MM");
            break;

          //周计划
          case 3:
            time = moment().format("YYYY-w");
            break;

          default:
            break;
        }
        this.ruleForm.planTime = time;
      }
    },

    filterCategoryValue(val) {
      switch (val) {
        case "1":
          return "年计划";

        case "2":
          return "月计划";

        case "3":
          return "周计划";
      }
    },

    //上传文件之前钩子
    beforeUpload(file) {
      this.fileList = [file];
      return false;
    },

    //模板下载
    downloadTemplate() {
      this.downloadLoading = true;
      let { id } = this;
      dlImportPlanTemplate({ id })
        .then((data) => {
          downLoadFileByArraybuffer(data, "计划进度模板" + getNowDateStr());
        })
        .finally((_) => {
          this.downloadLoading = false;
        });
    },

    //删除模板
    delChoosedFile(index) {
      this.fileList = this.fileList.filter((v, i) => i != index);
    },

    //返回
    goBack() {
      this.restForm();
      this.$emit("update:visible", false);
    },

    restForm() {
      this.ruleForm = {
        //计划时间
        planTime: undefined,
        //编制人
        fillUser: "",
        // 编制时间
        fillTime: "",
        // 备注
        remark: "",
        //审批结果
        operate: "2",
        //审批人
        approvePeople: "",
        //审批意见
        reason: "",
      };
      this.tabIndex = "1";
      this.fileList = [];
      this.panelList = [
        {
          key: "1",
          header: "任务明细",
        },
        {
          key: "2",
          header: "任务清单",
        },
      ];
      this.$refs.ruleForm.resetFields();
    },

    //监听计划时间选择
    planTimeChange(ev, type) {
      if (type == 1) {
        this.yearChange(ev);
      }
    },

    //监听年切换
    yearChange(ev) {
      if (!ev) {
        this.ruleForm.planTime = "";
      }
    },

    // 选择年
    yearPick(e) {
      this.ruleForm.planTime = moment(e).format("YYYY");
      this.isopen = false;
    },

    // 选择年后，关闭弹窗
    yearStatus(status) {
      if (status) {
        this.isopen = true;
      } else {
        this.isopen = false;
      }
    },

    getTitle(val) {
      let type = Number(val);
      switch (type) {
        case 0:
          return "新增";

        case 1:
          return "审批";

        case 2:
          return "查看";

        case 3:
          return "编辑";

        default:
          break;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.planoperate-container {
  box-sizing: border-box;
  height: 100%;
  .flex();
  flex-direction: column;
  padding: 0 0 0 10px;

  .common-page-header {
    height: 46px;
    background: #fff;
    .flex();
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    flex-shrink: 0;
    border-bottom: 1px solid #f3f4f6;
    &::before {
      content: attr(header);
      font-size: 16px;
      color: #525a5d;
      height: 16px;
      .flex();
      align-items: center;
      border-left: 3px solid var(--primary-color);
      padding-left: 8px;
    }
  }
  .planoperate-body {
    flex: 1;
    background: #fff;
    .custom-scrollbar();
    /deep/.ant-collapse {
      .ant-collapse-item {
        &:last-child {
          border-bottom: none;
        }
      }
    }
    /deep/.ant-form {
      .ant-form-item {
        .flex();
        .ant-form-item-label {
          flex-shrink: 0;
        }
        .ant-form-item-control-wrapper {
          flex: 1;
          .ant-input-affix-wrapper {
            width: 100%;
            textarea {
              height: 80px;
            }
          }
        }
      }
    }
    .task-detail-container {
      padding: 0 80px 0 0;

      /deep/ .ant-form-item-label {
        width: 150px;
      }
      /deep/.ant-calendar-picker {
        width: 100%;
      }
    }
    .task-list-container {
      padding: 0 20px;
      &.no-export {
        /deep/.ant-tabs-bar {
          display: none;
        }
      }
      //选择梁号
      .choose-beam-number {
        padding-bottom: 20px;
        .ant-select {
          width: 200px;
        }
        .flex();
      }
      .choose-template-container {
        padding: 0 0 0 20px;
        .download-model {
          width: 100%;
          height: 80px;
          background: #fafafa;
          border: 1px dashed #e5e5e5;
          .flex();
          align-items: center;
          justify-content: space-between;
          color: #666;
          box-sizing: border-box;
          padding: 0 25px;
          margin-bottom: 7px;
        }
        .choose-file-warp {
          width: 100%;
          background: #fafafa;
          border: 1px dashed #e5e5e5;
          box-sizing: border-box;
          padding: 14px 24px 24px 24px;
          .tip {
            padding-bottom: 10px;
            font-size: 14px;
            color: #666666;
          }
          .choose-file {
            width: 100%;
            height: 208px;
            /deep/.ant-upload-list-text {
              display: none;
            }
            /deep/.ant-upload-drag {
              background: #ffffff;
            }
            .ant-upload {
              border: none;
              .icon {
                width: 32px;
                height: 32px;
                background: url("https://jszhgd.cn/static/pc/quality-engineering-app/download.png")
                  no-repeat;
                background-size: 100% 100%;
                margin: 0 auto 10px auto;
              }
              .upload-tip {
                font-size: 14px;
                color: #666;
              }
            }
          }
          .choosed-file-warp {
            .choosed-file {
              align-items: center;
              color: var(--primary-color);
              .name {
                width: 450px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .size {
                margin-left: auto;
              }
              .delete-button {
                width: 20px;
                height: 20px;
                margin-left: 4px;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                margin-left: 4px;
                color: #ff4d4f;
              }
            }
          }
        }
      }
    }
  }
  .planoperate-footer {
    height: 72px;
    background: #fff;
    border-top: 1px solid #f3f4f6;
    .flex();
    align-items: center;
    justify-content: center;
  }
}
</style>
